<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <nav class="navbar">
          <div class="container">
            <a href="#" class="brand">项目管理系统</a>
            <ul class="menu">
              <li class="dropdown">
                <router-link to="/project-management/list" class="link" @mouseover="toggleDropdown" @mouseout="hideDropdown">项目管理</router-link>
                <ul v-if="showDropdown" class="submenu">
                  <li><router-link to="/project-management/list" active-class="active">项目仓库</router-link></li>
                  <li><router-link to="/project-management/create">创建项目</router-link></li>
                </ul>
              </li>
              <li><router-link to="/module-management" class="link">模块管理</router-link></li>
              <li><router-link to="/interface-management" class="link">接口管理</router-link></li>
              <li><router-link to="/create-interface" class="link">创建接口</router-link></li>
            </ul>
          </div>
        </nav>
      </el-header>
      <el-container>
        <el-aside width="100px" >Aside</el-aside>
        <el-main>
          <router-view></router-view> 
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ElContainer, ElHeader, ElAside, ElMain } from 'element-plus';

export default {
  name: 'ContainerView',
  components: {
    ElContainer,
    ElHeader,
    ElAside,
    ElMain,
  },
  data() {
    return {
      showDropdown: false,
    };
  },

  methods: {
    toggleDropdown() {
      this.showDropdown = true; // 显示下拉菜单
    },
    hideDropdown() {
      this.hideTimer = setTimeout(() => {
        this.showDropdown = false;
      }, 10000); // 延迟 1000 毫秒后隐藏
    },
  },
};
</script>

<style scoped>
/* Navbar styles */
.navbar {
  background-color: #333;
  color: white;
  padding: 10px 20px;
  height: 60px; /* 设置固定高度 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* 设置容器宽度为 100% */
  margin: 0 auto; /* 居中 */
  padding: 0 20px; /* 内容左右两侧的内边距 */
}

.brand {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu li {
  position: relative;
  margin-left: 20px; /* 改为左侧间距 */
}

.menu a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
  padding: 5px 10px;
}

.menu a:hover {
  color: #ddd;
}

.dropdown:hover .submenu {
  display: block;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.submenu li {
  margin: 0;
}

.submenu a {
  display: block;
  padding: 5px 10px;
  color: white;
  text-decoration: none;
}

.submenu a:hover {
  background-color: #f1f1f1;
  color: #333;
}

/* Element Plus container styles (optional, can be customized further) */
.common-layout {
  height: 100vh; /* 设置为视口高度 */
  overflow-y: hidden; /* 隐藏垂直滚动条 */
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 700px; /* 可以移除或调整 */
  overflow-y: auto; /* 如果内容超出，则显示滚动条 */
  height: 100%; /* 设置高度为 100% */
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  overflow-y: auto; /* 如果内容超出，则显示滚动条 */
  padding: 20px; /* 添加内边距 */
}

body, html {
  height: 100%; /* 设置 body 和 html 的高度为 100% */
  margin: 0; /* 移除默认的外边距 */
  padding: 0; /* 移除默认的内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:last-child .el-aside,
.el-container:last-child .el-main {
  padding: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>